<template>
  <el-dialog :visible.sync="visible" title="选班 / 调班" @open="onOpen" @close="onClose">
    <el-form ref="selectForm" :model="selectForm" :rules="selectRules" :close-on-click-modal="false" label-width="100px" >
      <el-form-item label="姓名">
        <el-input v-model="studentName" :readonly="true" style="width: 90px" />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="订课课程" prop="studentCourseId">
            <el-select v-model="selectForm.studentCourseId" clearable placeholder="订课课程" @change="onCourseChange" @clear="onCourseClear">
              <el-option
                v-for="(item, index) in unAssignOrders"
                :key="index"
                :label="item.courseName"
                :value="item.studentCourseId"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="分班班级" prop="classId">
            <template>
              <el-select v-model="selectForm.classId"  placeholder="选择班级" :loading="classLoading" @change="onClassChange">
                <el-option v-for="item in classes" :key="item.classId" :label="item.className" :value="item.classId">
                  <span style="float: left">{{ item.className }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.existing }} / {{ item.capacity }}</span>
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="授课老师">
            {{ teacher.name }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item>
          <el-button type="text" @click="handleCreate">没有班级？新建一个</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click.native="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click.native="submitClass">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { selectClass } from '@/api/student'
import { getClassListOptions } from '@/api/class'

export default {
  // eslint-disable-next-line vue/require-prop-types
  props: {
    merchantStudentId: {
      type: Number,
      required: true
    },
    studentName: {
      type: String,
      required: true
    },
    courseInfoList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      classLoading: false,
      classes: [],
      selectForm: {
        studentCourseId: '',
        merchantStudentId: null,
        classId: null
      },
      unAssignOrders: [],
      selectRules: {
        studentCourseId: [{ required: true, message: '请选择订购课程', trigger: 'blur' }],
        classId: [{ required: true, message: '请选择分班班级', trigger: 'blur' }]
      },
      teacher: {
        name: ''
      }
    }
  },
  methods: {
    onOpen() {
      // 获取用户的订购的课程信息
      console.log('打开选班对话框')
      if (this.courseInfoList == null) {
        return
      }
      for (let index = 0; index < this.courseInfoList.length; index++) {
        if (this.courseInfoList[index].classId == null || this.courseInfoList[index].classId == 0) {
          this.unAssignOrders.push(this.courseInfoList[index])
        }
      }
    },
    onClose() {
      this.unAssignOrders.length = 0
      this.$refs['selectForm'].resetFields()
    },
    // 切换订购课程
    onCourseChange(index) {
      // 判断courseInfoList中有没有未订购的课程，如果有则可以选班，否则要先退班，申请
      console.log('订购课程orderCourseId=' + index)
      // 有订单课程，就会有课程类型
      for (let i = 0; i < this.unAssignOrders.length; i++) {
        var orderCourse = this.unAssignOrders[i];
        if (orderCourse.studentCourseId === index) {
          const para = {
            courseId: orderCourse.courseId
          }
          this.getClassOptions(para)
        }
      }
    },
    onClassChange(index) {
      console.log('选中的班级' + index)
      for (let i = 0; i < this.classes.length; i++) {
        if (this.classes[i].classId === index) {
          console.log(this.classes[i])
          this.teacher.name = this.classes[i].teacherName
        }
      }
    },
    onCourseClear(index) {
      console.log('取消选择的班级' + index)
    },
    getClassOptions(para) {
      this.classLoading = true
      getClassListOptions(para).then(res => {
        this.classLoading = false
        this.classes = res.data
      }).catch(err => {
        this.classLoading = false
        this.$notify({
          title: '获取分班班级失败',
          message: err.msg,
          type: 'error'
        })
      })
    },
    handleCreate() {
      this.$router.push({
        path: '/education/class'
      })
    },
    resetForm() {
      this.visible = false
      this.$refs['selectForm'].resetFields()
    },
    cancel() {
      this.resetForm()
    },
    submitClass() {
      this.$refs.selectForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.selectForm.merchantStudentId = this.merchantStudentId
          selectClass(this.selectForm).then(res => {
            this.resetForm()
            this.$message({
              message: '分班成功',
              type: 'success'
            })
            this.visible = false
            this.loading = false
            this.$emit('selectClassSucc', 1)
          }).catch(err => {
            this.loading = false
            this.$notify({
              title: '分班失败',
              message: err.msg,
              type: 'error'
            })
          })
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
